<container>
  <row>
    <columns small="12" large="12">
      <callout>
        <p>Lorem ipsum</p>
      </callout>
    </columns>
  </row>
  <row class="collapse">
    <columns small="12" large="12">
      <callout>
        <p>Lorem ipsum</p>
      </callout>
    </columns>
  </row>
  <row>
    <columns small="12" large="6">
      <callout class="alert">
        <p>Small Alert Callout should be 6 columns in large</p>
      </callout>
    </columns>
    <columns small="12" large="6">
      <callout class="primary">
      </callout>
    </columns>
  </row>
  <row>
    <columns small="12" large="2">
      <callout class="success">
        <p>Success</p>
      </callout>
    </columns>
    <columns small="4" large="4">
      <callout class="warning">
        <p>Warning</p>
      </callout>
    </columns>
    <columns small="8" large="6">
      <callout>
        <p>Normal 8 and 6</p>
      </callout>
    </columns>
  </row>
</container>
